@bg : rgb(100, 200, 66);
@w: 100px;

header {
    background: @bg;
    width: @w*2;
    height: 200px;
    border: 10px solid yellow;
}

@font-face {
    font-family: "iconfont";
    /* Project id 3826274 */
    src: url('../font/iconfont.woff2?t=1671007071016') format('woff2'),
        url('../font/iconfont.woff?t=1671007071016') format('woff'),
        url('../font/iconfont.ttf?t=1671007071016') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
}
.icon-liwu-08{
    font-size: 100px ;
    transform: rotate(0deg);
    transition: 1s transform ease;
    display: block;
    width: 100px;
    height: 100px;
    &:hover{
        transform:rotate(300deg);
    }
}

.react {
    width: 200px;
    height: 200px;
    float: left;
    margin-right: 20px;
    background: url('../images/react.png');
    background-size: cover;
}

.vue {
    width: 200px;
    height: 200px;
    float: left;
    background: url('../images/vue.png');
    background-size: cover;
}

body{
    background: linear-gradient(to left top,rgba(102,200,100),rgba(98,36,157));
}